<template>
	<view class="container">
        <view class="wrapper">
            <view class="item" v-for="(item, index) in list" :key="index">
                <image :src="item.image_uri || '/static/icon/avatar.png'" class="avatar"></image>
                <view class="name">{{item.nickname}}</view>
            </view>
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
			}
		},
		
		onLoad() {
            // this.getList()
		},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods:{
		    getList() {
		    	if (this.status == 'nomore') return;
		    	this.status = 'loading';
		    	this.$ajax('subordinates', {
		    		userToken: this.$getSync('userToken'),
		    		page: this.page,
		    		limit: 10,
		    		// pbegin: this.startTime, //搜索开始时间
		    		// pend: this.endTime, //搜索结束时间
		    		// type: 2,//类型 2-本周 1-全部
		    	}).then(ret => {
		    		if (ret.status == 0) {
		    			if (ret.data.length > 0) {
		    				this.list = this.list.concat(ret.data);
		    				this.page++;
		    				this.status = 'loadmore'
		    			} else {
		    				this.status = 'nomore'
		    			}
		    		} else {
		    			this.$toast(ret.message);
		    		}
		    	});
		    },
		}
	}
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    
    .sticky {
        width: 750rpx;
        height: 75rpx;
        background-color: #f42c2c;
        font-size: 26rpx;
        color: #fff;
        line-height: 75rpx;
        text-align: center;
    }
        
    .wrapper{
        padding: 30rpx 20rpx 100rpx;
    }
    .item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 35rpx 35rpx 35rpx 50rpx;
        margin-bottom: 20rpx;
    }
    .avatar{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 30rpx;
    }
    .name{
        width: 65vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
	
    
	
</style>
